<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>ISO挂载</title>
    <link rel="icon" href="">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
  </head>
  <body>
  	<div class="panel panel-default">
	  <div class="panel-heading">
	    <h3 class="panel-title">已挂载</h3>
	  </div>
	  <div class="panel-body" id="mounted_list">
	  	
	  </div>
	</div>

  	<form class="form-inline">
  		<div class="form-group">
		    <label>ISO文件</label>
		    <div class="input-group file-input" data-accept=".iso">
		    	<input id="isoFileInput" type="text" class="form-control" /><label class="input-group-addon btn btn-primary">浏览...</label>
		    </div>
		</div>
		<div class="form-group">
		    <label></label>
		    <button id="mountBtn" type="button" class="btn btn-primary">挂载</button>
		</div>
  	</form>

  	<script id="mounted-list" type="text/html">
		<ul>
			{{each data item}}
	  		<li>{{item.name}} <a href="#" class="unmount-link" data-id="{{item.id}}">卸载</a></li>
	  		{{/each}}
	  	</ul>
	</script>

    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/template-web.js"></script>
    <script type="text/javascript" src="../../js/fileinput.js"></script>
    <script type="text/javascript">
	
	var getMountedList=function(check){
		var mountedList=localStorage.getItem('user_mounted_iso_list');
		if(mountedList==null||mountedList==''){
			mountedList=[];
		}else{
			mountedList=$.parseJSON(mountedList);
		}
		if(!check){
			return mountedList;
		}

		var againSet=false;
		var newMountList=[];
		var fs=require('fs');
		for(var i=0;i<mountedList.length;i++){
			var id=mountedList[i].id;
			if(!fs.existsSync(`/mnt/${id}`)){
				againSet=true;
				continue;
			}else{
				newMountList.push(mountedList[i]);
			}
		}
		if(againSet){
			localStorage.setItem('user_mounted_iso_list',JSON.stringify(newMountList));
		}
		return newMountList;
	};

	var renderMountedList=function(check){
		$("#mounted_list").html(template("mounted-list",{data:getMountedList(check)}));
	};

	var setMountedList=function(mountedList){
		localStorage.setItem('user_mounted_iso_list',JSON.stringify(mountedList));
	    renderMountedList();
	};

	renderMountedList(true);

	$("#mountBtn").click(function(){
		var id=window.top.app.createUUID();
		var isoFile=$("#isoFileInput").val();
		var fileName=isoFile.substring(isoFile.lastIndexOf('/')+1);
		window.top.app.runAsRoot(`mkdir /mnt/${id} && sudo mount -o loop "${isoFile}" /mnt/${id} && nautilus /mnt/${id}`);

		var mountedList=getMountedList();
		mountedList.push({"id":id,"name":fileName,"file":isoFile});
		setMountedList(mountedList);
	});

	$('body').on('click',"a.unmount-link",function(){
		if(!$(this).is(".disabled")){
			var id=$(this).data("id");
			window.top.app.runAsRoot(`umount /mnt/${id} && sudo rmdir /mnt/${id}`);

			$(this).text("已卸载");
			$(this).addClass("disabled");
		}
	});	
    </script>
  </body>
</html>
